<template>
  <div>
    <h5 class="info-text">请填写基本信息完成注册</h5>
    <div class="md-layout">
      <div class="md-layout-item md-size-100 md-small-size-100">

        <md-field :class="[
          {'md-valid': !errors.has('name') && touched.name},
          {'md-form-group': true},
          {'md-error': errors.has('name')}]">
          <md-icon>face</md-icon>
          <label>姓名</label>
          <md-input
            v-model="name"
            data-vv-name="name"
            type="text"
            name="name"
            required
            v-validate="modelValidations.name">
          </md-input>
          <slide-y-down-transition>
            <md-icon class="error" v-show="errors.has('name')">close</md-icon>
          </slide-y-down-transition>
          <slide-y-down-transition>
            <md-icon class="success" v-show="!errors.has('name') && touched.name">done</md-icon>
          </slide-y-down-transition>
        </md-field>

        <md-field :class="[
          {'md-valid': !errors.has('email') && touched.email},
          {'md-form-group': true},
          {'md-error': errors.has('email')}]">
          <md-icon>email</md-icon>
          <label>邮箱</label>
          <md-input
            v-model="email"
            data-vv-name="email"
            type="text"
            name="email"
            required
            v-validate="modelValidations.email">
          </md-input>
          <slide-y-down-transition>
            <md-icon class="error" v-show="errors.has('email')">close</md-icon>
          </slide-y-down-transition>
          <slide-y-down-transition>
            <md-icon class="success" v-show="!errors.has('email') && touched.email">done</md-icon>
          </slide-y-down-transition>
        </md-field>

        <md-field :class="[
          {'md-valid': !errors.has('password') && touched.password},
          {'md-form-group': true},
          {'md-error': errors.has('password')}]">
          <md-icon>lock_outline</md-icon>
          <label>密码</label>
          <md-input
            v-model="password"
            data-vv-name="password"
            type="password"
            name="password"
            required
            v-validate="modelValidations.password">
          </md-input>
          <slide-y-down-transition>
            <md-icon class="error" v-show="errors.has('password')">close</md-icon>
          </slide-y-down-transition>
          <slide-y-down-transition>
            <md-icon class="success" v-show="!errors.has('password') && touched.password">done</md-icon>
          </slide-y-down-transition>
        </md-field>

        <md-field v-show="isOrgUser" class="md-form-group">
          <md-icon>supervisor_account</md-icon>
          <label>国家</label>
          <md-select v-model="orgId" name="orgId" style="margin-left: 12px;">
            <md-option v-for="org in orgList" :value="org.id" :key="org.id">{{org.label}}</md-option>
          </md-select>
        </md-field>

        <md-field v-show="isOrgUser" class="md-form-group">
          <md-icon>vpn_key</md-icon>
          <label>邀请码</label>
          <md-input v-model="inviteCode" name="inviteCode" type="text">
          </md-input>
        </md-field>
      </div>
    </div>
  </div>
</template>
<script>
  import { SlideYDownTransition } from 'vue2-transitions'

  import {toast} from '@/utils/tools'
  import {post} from '@/utils/ajax'
  import * as api from '@/constants/api'

  export default {
    components: {
      SlideYDownTransition
    },
    props: {
      role: {
        type: String,
      }
    },
    data() {
      return {
        orgList: [{id: 1, label: '中国'},{id: 2, label: '美国'}],
        name: '',
        password: '',
        email: '',
        orgId: null,
        inviteCode: null,

        touched: {
          name: false,
          email: false,
          password: false,
        },

        modelValidations: {
          name: {
            required: true,
          },
          email: {
            required: true,
            email: true
          },
          password: {
            required: true,
          }
        }
      }
    },
    computed:{
      isOrgUser(){
        return this.role === 'role1';
      },
    },
    methods: {
      getError(fieldName) {
        return this.errors.first(fieldName)
      },
      validate() {
        return this.$validator.validateAll().then(res => {
          if(!res) {
            toast('表单验证失败，请仔细检查', 'warning');
          }

          if(res && this.isOrgUser){
            let errMsg = ''
            if(!this.orgId){
              errMsg = '请选择国家';
            }else if(!this.inviteCode){
              errMsg = '请输入邀请码'
            }
            if(errMsg){
              toast(errMsg, 'warning')
              res = false
            }
          }

          let model = {
            name: this.name,
            password: this.password,
            email: this.email,
            orgId: this.orgId,
            inviteCode: this.inviteCode,
          }

          this.$emit('on-validated', res, model)
          return res
        })
      },
    },
    created(){

    },
    watch: {
      name () {
        this.touched.name = true
      },
      password () {
        this.touched.password = true
      },
      email () {
        this.touched.email = true
      },
      role(newValue){
        if(newValue!=='orgUser'){
          this.orgId = null;
          this.inviteCode = null;
        }
      }
    }
  }
</script>
<style>
</style>
